<link rel="stylesheet" href="/assets/home/css/details.css">
<link rel="stylesheet" href="/assets/home/plugins/mescroll/mescroll.min.css">
<link rel="stylesheet" href="/assets/home/plugins/ckplayer/css/ckplayer.css">

<!-- <style>
    .chapter ul li .active {
        color: red;
    }
</style> -->
<header class="mui-bar mui-bar-nav mui-bar-nav-bg">
    <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href=""></a>
    <div class="nav">
        <ul id="tab">
            <li class="active" data-type="course">
                课程
            </li>
            <li data-type="info">详情</li>
            <li data-type="comment">评论</li>
        </ul>
    </div>

</header>

<div id="tab-content">
    <div id="course" class="active">
        <div id="cover">
            <!-- 课程封面 -->
            <img class="cover_bg" src="{$subject.thumb_cdn}">
            <!-- 中间播放键 -->
            <div id="play">
                <img src="/assets/home/images/play.png" />
            </div>
        </div>

        <!-- ckplayer视频容器元素 -->
        <div id="video"></div>

        <!-- 课程信息 -->
        <div class="head">
            <div class="info">
                <h4 class="name">{$subject.title}</h4>
                <div class="action" id="btndz1">
                    {if condition="$bnLikes.like == 1"}
                    <img class="thumbs" src="/assets/home/images/thumbs-up.png" data-value="1">
                    {else /}
                    <img class="thumbs" src="/assets/home/images/thumbs.png" data-value="0">
                    {/if}
                    <span class="num">{$subject.likes}</span>
                </div>
            </div>
            <ul>
                <li>
                    <span>课程分类：{$category.name}</span>
                </li>
                <li>
                    <span>课程价格：</span>
                    <span class="price">￥{$subject.price}</span>
                </li>
                <li>
                    <span>章节总数: {$category.weight}</span>
                </li>
                <li>
                    <span>发布时间：{$subject.createtime_text}</span>
                </li>
            </ul>
        </div>

        <!-- 授课老师 -->
        <div class="teacher">
            <div class="title">授课老师</div>
            <div class="info">
                <div class="left">
                    <div class="avatar">
                        <a href="#">
                            <img src="{$teacher.avatar_cdn}" alt="">
                        </a>
                    </div>
                </div>
                <div class="right">
                    <div class="name">
                        <a href="#">
                            {$teacher.name}
                        </a>
                    </div>
                    <div class="job">{$teacher.follows}</div>
                    <div class="content">
                        {$teacher.content}
                    </div>
                </div>
            </div>
        </div>

        <!-- 课程章节 -->
        <div class="chapter">
            <div class="title">课程章节</div>
            <ul>
                {if condition="$chapter"}
                {foreach $chapter as $key => $item}
                <li data-cid="{$item.id}">{++$key} .{$item.title}</li>
                {/foreach}
                {else /}
                <li>暂无课程章节</li>
                {/if}
            </ul>
        </div>

        <!-- 购买 -->
        <div class="footer">
            <div class="footer-box">
                {if condition="$bnLikes.collect == 0"}
                <div class="collection">
                    <img src="/assets/home/images/rate.png" data-collect="0">
                    收藏
                </div>
                {else /}
                <div class="collection">
                    <img src="/assets/home/images/rate_active.png" data-collect="1">
                    已收藏
                </div>
                {/if}
                {if condition="empty($order) == true"}
                <a href="{:url('/home/subject/teacher/confirm')}?subject={$subject.id}" class="btn" data-buy="0">购买</a>
                {else /}
                <a class="btn disabled" style="background-color: #ccc" data-buy="1">已购买课程</a>
                {/if}
            </div>
        </div>
    </div>

    <!-- 详情 -->
    <div id="info">
        <div class="mui-table-view content">
            {$subject.content}
        </div>
    </div>

    <!-- 评论内容 -->
    <div id="comment" class="mescroll">
        <!-- 评论内容 -->
        <ul class="mui-table-view list">
        </ul>
    </div>
</div>

<!-- 弹出菜单 -->
<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action">
    <!-- 可选择菜单 -->
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a id="buy" href="javascript:void(0)">
                立即购买
            </a>
        </li>
    </ul>
    <!-- 取消菜单 -->
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a href="#sheet1"><b>取消</b></a>
        </li>
    </ul>
</div>

<script src="/assets/home/plugins/mescroll/mescroll.min.js"></script>
<script src="/assets/home/plugins/ckplayer/js/ckplayer.min.js"></script>

<script>
    let subid = `{$subject.id}`;
    let cid = 0;
    let player = null;

    $('#tab li').click(function () {
        let type = $(this).data('type');

        $(this).addClass('active').siblings().removeClass('active');
        $('#tab-content #' + type).addClass('active').siblings().removeClass('active');
    });

    $(document).ready(function () {
        cid = $('.chapter ul li:first').data('cid');

        if (cid) {
            $('.chapter ul li:first').addClass('active');
        }

        cid = cid ? cid : 0;
    });

    $('.chapter ul li').click(function () {
        if (!cid) {
            return false;
        }

        $(this).addClass('active').siblings().removeClass('active');
        cid = $(this).data('cid');

        cid = cid ? cid : 0;

        $('#cover').show();
        $('#video').hide();

        //暂停播放
        if (player) player.pause();
    });

    // 实例化插件
    let meScroll = new MeScroll('comment', {
        // 下拉刷新
        down: {
            auto: false,//是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: downCallback // 下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },
        // 上拉加载
        up: {
            auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            callback: UpCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            toTop: { //配置回到顶部按钮
                duration: 1000,
                src: "/assets/home/images/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                offset: 100
            }
        }
    });


    async function downCallback() {

        meScroll.resetUpScroll();
        $('#comment .list').empty();
        return false;
    }


    async function UpCallback(page) {

        let num = $('.action .thumbs').attr('data-value');
        let data = {
            page: page.num,
            limit: page.size,
            subid,
            num
        }

        let result = await POST({
            url: 'index/comment',
            params: data
        });

        if (result.code === 1) {
            let list = result.data.common;
            let count = result.data.count;

            meScroll.endBySize(list.length, count);
            fetchList(list);
            // mui.toast("评论存在");
        } else {

            $('#comment .list').html(`<li class="mui-table-view-cell mui-media">暂无评论</li>`);
            meScroll.endBySize(0, 0);
            return false;
        }
    }

    function fetchList(list = []) {
        if (list.length > 0) {
            let Item = '';
            for (let item of list) {
                Item = ``;

                // 渲染出评分的星
                let rateTemp = '';

                // 存放评分变量
                let rate = Math.abs(item.rate);

                for (let i = 1; i <= 5; i++) {
                    if (i <= rate) {
                        rateTemp += `<span>
                                        <img src="/assets/home/images/rate_active.png" alt="">
                                    </span>
                                    `
                    } else {
                        rateTemp += `
                                    <span>
                                        <img src="/assets/home/images/rate.png" alt="">
                                    </span>
                                    `
                    }
                }

                Item = `
                <li class="mui-table-view-cell mui-media">
                    <img class="mui-media-object mui-pull-left userimg" src="${item.business.avatar_cdn}">
                    <div class="mui-media-body">
                        <div class="header">
                            <span class="nickname">${item.business.nickname}</span>
                        </div>
                        <p>评论内容：${item.content}</p>
                        <p>评论时间：${item.createtime_text}</p>
                        <div class="rate">
                            ${rateTemp}
                        </div>
                    </div>
                </li>
                `;

                $('#comment .list').append(Item);
            }
        }
    }

    //点赞操作
    $('#btndz1').click(async function () {

        let numtext = $('.action .thumbs').attr('data-value');   //获取点赞的id值，确定是点赞状态，还是没点赞状态

        let data = {
            subid,
            numtext
        }

        let result = await POST({
            url: 'index/btndz',
            params: data
        });

        console.log(result);

        if (result.code === 1) {

            let likes = result.data.like_count;
            let like = result.data.like;

            if (numtext == 0) {

                mui.toast("点赞成功");

                $('#btndz1 .thumbs').attr('src', "/assets/home/images/thumbs-up.png");
                $('#btndz1 .thumbs').attr('data-value', "1");
            } else {

                mui.toast("取消点赞");

                $('#btndz1 .thumbs').attr('src', "/assets/home/images/thumbs.png");
                $('#btndz1 .thumbs').attr('data-value', "0");
            }
            $('.action .num').html(likes.likes);
        } else {
            mui.toast("点赞失败");
        }
    })

    //不可重复购买操作
    $('.footer .disabled').click(function () {
        mui.toast("已购买，无需重复购买");
    })

    //播放操作
    $('#play').click(async function () {
        if ($('.disabled').data('buy') == 1) {
            let data = {
                subid,
                cid,
            }

            let result = await POST({
                url: 'index/play',
                params: data
            });

            console.log(result);

            if (result.code === 1) {
                let url = result.data.url;
                if (!url) {
                    mui.toast('播放地址不存在');
                    return false;
                }

                $('#cover').hide();
                $('#video').show();

                // 配置播放器
                let videoObject = {
                    container: '#video',
                    video: url,
                    autoplay: true,//是否自动播放
                    loop: false,//是否需要循环播放
                    ended: null,//结束显示的内容
                    webFull: true,//是否启用页面全屏按钮，默认不启用
                    theatre: true,//是否启用剧场模式按钮，默认不启用
                    controls: true,//是否显示自带控制栏
                    rightBar: true,//是否开启右边控制栏
                    smallWindows: true,//是否启用小窗口模式
                    smallWindowsDrag: true,//小窗口开启时是否可以拖动
                    screenshot: true,//截图功能是否开启
                    timeScheduleAdjust: 1,//是否可调节播放进度,0不启用，1是启用，2是只能前进（向右拖动），3是只能后退，4是只能前进但能回到第一次拖动时的位置，5是看过的地方可以随意拖动
                    logo: '',//logo
                }

                player = new ckplayer(videoObject);
                mui.toast("播放成功")
            } else {
                mui.toast("播放失败");
                return false
            }
        } else {
            mui.toast("请先购买该课程");
            console.log(1);
        }
    })

    //收藏操作
    var collect = $('.collection img').data('collect');
    $('.collection img').click(async function () {
        console.log(collect);
        if (collect == 0) {
            collect = 1;
        } else {
            collect = 0;
        }
        console.log(collect);
        let data = {
            collect
        }

        let result = await POST({
            url: 'index/save',
            params: data
        });

        console.log(result);

        if (result.code === 1) {
            let cl = result.data.collect;
            if (cl == 1) {
                $(this).attr('src', '/assets/home/images/rate_active.png');
                $(this).attr('data-collect', 1);
                // $('.collection').text("已收藏");
                mui.toast("收藏成功");
            } else {
                $(this).attr('src', '/assets/home/images/rate.png');
                $(this).attr('data-collect', 0);
                // $('.collection').text("收藏");
                mui.toast("取消收藏");
            }
        } else {
            mui.toast("收藏失败");
        }
    })
</script>